<template>
    <div>
        <div class="f-pk f-bgw">
        <!--<h1 class="rank-title">排行榜</h1>-->
        <mt-navbar v-model="selected">
            <mt-tab-item v-for="(item,ind) in topkey" :key="ind" :id="String(ind+1)">{{item.topname}}</mt-tab-item>
            <!--<mt-tab-item id="1">狐玩榜</mt-tab-item>            
            <mt-tab-item id="2">热游榜</mt-tab-item>
            <mt-tab-item id="3">充值榜</mt-tab-item>
            <mt-tab-item id="4">新游榜</mt-tab-item>-->
        </mt-navbar>
        </div>
        <mt-tab-container v-model="selected" v-if="topdata" class="main f-mb80">
            <mt-tab-container-item v-for="(item,ind) in topkey" :key="ind" :id="String(ind+1)">
                <ul class="list rank-list">
                    <li v-for="(idx,index) in topdata[item.topkey]" :key="index" class="f-dfc">
                        <router-link class="f-dfc f-fx1" :to="`/detail/${idx.gameid}`" tag="div">
                        <div class="f-pr">
                            <i class="f-pa rank-tag f-fs14">TOP{{idx.top}}</i>
                            <img :src="idx.micon" class="list-img bg">
                        </div>
                        <div>
                            <p><i v-show="idx.agentname" :style="{backgroundColor:idx.agentcolor}" class="f-cfff rank-txt">{{idx.agentname}}</i>{{idx.gamename}}</p>
                            <p class="f-666 f-fs12" v-if="!idx.firstrate"><i v-show="idx.downloads">&nbsp;{{idx.downloads}}次下载</i>&nbsp;{{idx.adsize}}</p>
                            <p class="f-ib f-fs12 f-thd list-pub f-mp0" v-else>{{idx.publicity}}</p>
                            <p class="f-e85 f-fs12"><i v-show="idx.ad_min_rate||idx.ios_min_rate">首充{{plat===1?idx.ad_min_rate:idx.ios_min_rate}}折起</i>&nbsp;<i v-show="idx.firstrate">续充{{idx.firstrate}}折</i></p>
                        </div>
                        </router-link>
                        <buttons :id="idx.gameid" />
                    </li>
                </ul>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>

<script>
export default {
    name: "ranking",

    data() {
        return {
            topkey:null,
            topdata:null,
            selected:'1',
            plat:sessionStorage.platType
        }
    },
    methods: {},

    created() {
        this.$ajax.Rank.main().then(({data:{data:{topkey,topdata}}})=>{
            //console.log(topdata)
            this.topkey=topkey
            this.topdata=topdata
        })
    }
};
</script>

<style lang="less" scoped>
.mint-navbar .mint-tab-item.is-selected{
    color: #21201D;
    border-color:#FFC904;
    margin-bottom: 0;
}
.mint-navbar{
    a{
        padding: 30px 0;
    }
    border-bottom: 1px solid #eee;
}
.rank-tag{
    color: #fff;
    background: #999999;
    padding:0 5px;
    left:0;
}
.rank-list li:nth-child(1) i.rank-tag{
    background-color: #FF002A;
}
.rank-list li:nth-child(2) i.rank-tag{
    background-color: #FF5100;
}
.rank-list li:nth-child(3) i.rank-tag{
    background-color: #FFB300;
}
.list-pub{
    width:350px;
}

</style>
